<template>
  <!-- <view class="page" :style="{ 'padding-top': `calc(25rpx + ${capsuleInfo?.bottom}px)` }"> </view> -->
  <view class="page">
    <div class="list">
      <div class="item content" @click="goList(1)">
        <div class="img1">
          <image class="i" src="/static/alarm.png" mode="widthFix"></image>
          <view class="badge">12</view>
        </div>

        <div class="info">
          <div class="title">审核通知</div>
          <div class="desc">暂无新消息推送/您提交的合作商入驻已审核成功/失败</div>
        </div>
      </div>
      <div class="item content" @click="goList(2)">
        <div class="img2">
          <image class="i" src="/static/msg.png" mode="widthFix"></image>
          <view class="badge">1</view>
        </div>
        <div class="info">
          <div class="title">核销通知</div>
          <div class="desc">暂无新消息推送/您提交的合作商入驻已审核成功/失败</div>
        </div>
      </div>
    </div>

    <div class="empty_box" :style="{ height: barHeight + 'px' }"></div>
  </view>

  <tabBar :current="1" @barHeight="setBarheight" />
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { onShow, onLoad } from '@dcloudio/uni-app';
  import tabBar from '../../components/tabbar/tabbar';

  uni.hideTabBar();

  const userData = ref('');

  const barHeight = ref('');

  onLoad(() => {
    console.log('onLoad');
  });

  function setBarheight(height) {
    barHeight.value = height;
  }

  function goList(type) {
    uni.navigateTo({
      url: '/pages/message/list?type=' + type,
    });
  }
</script>

<style scoped lang="scss">
  .page {
    width: 100vw;
    min-height: 100vh;
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    background-color: #f5f5f5;
  }

  .content {
    background-color: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
  }

  .list {
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .img1 {
        position: relative;
        width: 81rpx;
        height: 91rpx;
        vertical-align: middle;
        margin-right: 28rpx;

        .i {
          width: 81rpx;
          height: 91rpx;
          vertical-align: middle;
        }

        .badge {
          position: absolute;
          top: -14rpx;
          right: -14rpx;
          width: 28rpx;
          height: 28rpx;
          line-height: 28rpx;
          text-align: center;
          background-color: #fd2323;
          font-size: 18rpx;
          color: #ffffff;
          z-index: 1;
          border-radius: 50%;
        }
      }

      .img2 {
        position: relative;
        width: 85rpx;
        height: 60rpx;
        margin-right: 28rpx;

        .i {
          width: 85rpx;
          height: 60rpx;
          vertical-align: middle;
        }

        .badge {
          position: absolute;
          top: -14rpx;
          right: -14rpx;
          width: 28rpx;
          height: 28rpx;
          line-height: 28rpx;
          text-align: center;
          background-color: #fd2323;
          font-size: 18rpx;
          color: #ffffff;
          z-index: 1;
          border-radius: 50%;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100rpx;
        padding: 8rpx 0;
        box-sizing: border-box;
        .title {
          font-weight: 500;
          font-size: 26rpx;
          color: #1e2737;
        }

        .desc {
          font-size: 22rpx;
          color: #1e2737;
          opacity: 0.8;
        }
      }
    }
  }
</style>
